<template>
	<view>
		<u-swiper :list="slides" name="img_url" height="320"></u-swiper>
		<view class="sort-tab">
			<u-tabs :list="sortList" :current="currentSort" @change="changeSort"></u-tabs>
		</view>
		<u-row gutter="16" class="u-skeleton">
			<u-col span="6" v-for="(item,index) in goodsList">
				<goods-card :item="item" :key="index"></goods-card>
			</u-col>
		</u-row>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	export default {
		computed: {
			goodsList() {
				if (this.goods.length) {
					return this.goods
				}
				return [{},{}]
			}
		},
		data() {
			return {
				imgList: ['https://cdn.uviewui.com/uview/swiper/2.jpg', 'https://cdn.uviewui.com/uview/swiper/3.jpg', ],
				sortList: [{
						name: '默认'
					},
					{
						name: '销量'
					},
					{
						name: '推荐'
					},
					{
						name: '最新'
					}
				],
				currentSort: 0,
				slides: [],
				goods: [],
				page: 1,
				loading: false
			}
		},
		onLoad() {
			this.getData()
			// console.log(111)
			// const res = await this.$u.get('/api/index').catch(e=>e)
			// const res = await this.$u.patch('/api/orders/1/confirm',{name:'aa'})
			// const res = await this.$u.api.index();
			// const res = await this.$u.api.authLogin({
			// 	email:'test@a.com',
			// 	password:'123123'
			// });
			// this.slides =res.slides
			// this.goods=res.goods.data
			// console.log(this.vuex_version)
			// this.$u.vuex('vuex_name','Tom')
			// console.log(this.vuex_name)
		},
		methods: {
			changeSort(i) {
				this.currentSort = i
				this.goods = []
				this.page = 1
				this.getData()
			},
			async getData() {
				this.loading = true
				const arr = ['default', 'sales', 'recommend', 'new']
				const params = {
					page: this.page,
					[arr[this.currentSort]]: 1
				}

				const res = await this.$u.api.index(params);
				this.slides = res.slides
				this.goods = [...this.goods, ...res.goods.data]
				this.loading = false
			}
		},
		onReachBottom() {
			this.page++;
			this.getData()
		}
	}
</script>

<style lang="scss" scoped>
	.sort-tab {
		text-align: center;
	}
</style>
